<template>
  <!-- 在线代码编辑器存储 -->
  <div ref="editorRef" class="editor-main h-80"></div>
</template>

<script lang="ts" setup>
import { basicSetup, EditorView } from 'codemirror'
import { EditorState } from '@codemirror/state'
import { javascript } from '@codemirror/lang-javascript'
import { json } from '@codemirror/lang-json'
// import { EditorView } from "@codemirror/view"
const editorRef = ref()
const editorView = ref()
const initEditor = () => {
  if (typeof editorView.value !== 'undefined') {
    editorView.value.destroy()
  }
  const jsonString = `{
  root: true,
  extends: [
  "plugin:vue/vue3-essential",
  "eslint:recommended",
  "@vue/eslint-config-typescript",
  "@vue/eslint-config-prettier",
  "vue-global-api"
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    endOfLine: "auto",
    "prettier/prettier": ["error", { "endOfLine": "auto" }]
  },
  }`

  const startState = EditorState.create({
    doc: jsonString,

    extensions: [basicSetup, javascript(), json()]
  })
  if (editorRef.value) {
    editorView.value = new EditorView({
      state: startState,

      parent: editorRef.value
    })
  }
}
// onMounted生命周期可以保证读取到dom元素
onMounted(() => {
  initEditor()
})
</script>

<style lang="less" scoped>
// .editor-main {
//   width: 100vw;
//   height: 100vh;
// }
</style>
